import { useState, useEffect } from 'react'
import DoctorCard from './DoctorCard'
import style from '../pages/home/index.module.css'
import http from '../api/index'
// 医生数据接口
interface DoctorData {
    id: number;
    doctorname: string;
    doctorcity: string;
    doctoradministre: string;
    socoadmin: string;
    doctorimage: string;
    doctorgood: number;
    doctorbrowse: number;
    doctorprice?: number;
    doctorstate?: string;
    department?: string;
}
interface DoctorListProps {
    department: string;
    initialDoctors?: DoctorData[];
}
function DoctorList({ department, initialDoctors = [] }: DoctorListProps) {
    const [doctors, setDoctors] = useState<DoctorData[]>([]);
    const [loading, setLoading] = useState(false);
    const [fetchError, setFetchError] = useState<string | null>(null);
    // 加载数据
    const loadDoctors = async () => {
        setLoading(true);
        try {
            const res = await http.get('/api/doctor/list', {
                params: {
                    page: 1,
                    pageSize: 2  // 只加载2条数据
                }
            });
            console.log('API响应:', res.data);
            if (res.data && res.data.data && Array.isArray(res.data.data)) {
                const newDoctors = res.data.data.slice(0, 2).map((doctor: DoctorData) => ({
                    ...doctor,
                    department: department
                }));
                console.log('医生数据:', newDoctors);
                setDoctors(newDoctors);
            } else {
                console.log('API返回数据格式不正确:', res.data);
            }
        } catch (error: any) {
            console.error('加载数据失败:', error);
            setFetchError(error.message || '加载失败');
        } finally {
            setLoading(false);
        }
    };
    // 初始化数据
    useEffect(() => {
        console.log('DoctorList 初始化:', { department, initialDoctors });
        
        if (initialDoctors && initialDoctors.length > 0) {
            console.log('使用初始数据:', initialDoctors);
            setDoctors(initialDoctors.slice(0, 2)); // 只显示前2条
        } else {
            console.log('没有初始数据，开始加载');
            loadDoctors();
        }
    }, [department, initialDoctors]);
    if (fetchError) {
        return (
            <div className={style.doctorList}>
                <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                    加载失败: {fetchError}
                </div>
            </div>
        );
    }
    return (
        <div className={style.doctorList}>
            {doctors.length === 0 && !loading ? (
                <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                    暂无{department}医生数据
                </div>
            ) : (
                <>
                    {doctors.map((doctor, index) => (
                        <DoctorCard 
                            key={`${doctor.id}-${index}`} 
                            doctor={doctor} 
                            department={department}
                            index={index}
                        />
                    ))}
                    {loading && (
                        <div style={{ padding: '20px', textAlign: 'center', color: '#999' }}>
                            加载中...
                        </div>
                    )}
                </>
            )}
        </div>
    );
}
export default DoctorList;